<template>
    <div class="collect-page">
        <div class="collect-box">
            <div class="collect-list" v-for="(item,index) in collectList" :key="index">
                <div class="delete-collect" @click="delectCollect(item['id'])">
                    <img src="~assets/icons/delete.png" alt="">
                    <span>删除</span>
                </div>
                <img :src="item['image_url']" alt="">
                <div class="product-message">
                    <div class="product-name">
                        <span>{{item.name}}</span>
                    </div>
                    <div class="product-price">
                        <div class="price">
                            <span>￥{{item.goods.price}}</span>
                            <span>￥{{item.goods['prime_cost']}}</span>
                        </div>
                        <div class="buy-btn" @click="buyNow(item['goods_id'])">
                            <span>立即购买</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';

export default {
    name:'collect',
    data(){
        return {
            virtualData:[],
            collectList:[]
        }
    },
    methods:{
        getCollectList(){
            let that = this;
            let token = localStorage.getItem('token');
            let loader = that.loading();
            that.$ajax(that, 'get', that.$api.collectList, null, token, function(res){
                // console.log(res);
                if(res.data['error_code'] == 0){
                    let temData = res.data.msg;
                    that.transferUrl(temData);
                    that.collectList = temData;
                    //console.log(that.collectList);
                }else{
                    that.toast(res.data['msg']);
                }
                loader.close();
            })
        },
        delectCollect(id){
            console.log(id);
            let token = localStorage.getItem('token');
            let that = this;
            
            MessageBox.confirm('确定删除该收藏吗?').then(action => {
                if(action == 'confirm'){
                    let loader = that.loading('删除中...');
                    that.$ajax(that, 'get', that.$api.collectDel+id, null, token, function(res){
                        console.log(res);
                        if(res.data['error_code'] == 0){
                            that.getCollectList();
                        }else{
                            that.toast(res.data['msg']);
                        }
                        loader.close();
                    })
                }
            })
        },
        buyNow(id){
            this.$router.push({path:'/product', query:{id:id}});
        }
    },
    mounted(){
        this.$store.state.tab = '我的收藏';
        this.getCollectList();
    },
    activated(){
        this.$store.state.tab = '我的收藏';
        this.getCollectList();
    },
    components:{
        MessageBox
    }
}
</script>

<style lang='less'>
@rem:100rem;

.collect-page{
    margin-top: 88/@rem;
    width: 100%;
    padding-top: 20/@rem;
    .collect-box{
        width: 100%;
        background: #ffffff;
        .collect-list{
            display: flex;
            height: 228/@rem;
            width: 100%;
            box-sizing: border-box;
            padding: 0 20/@rem;
            border-bottom: 2/@rem solid #f3f3f3;
            align-items: center;
            position: relative;
            .delete-collect{
                position: absolute;
                top: 10/@rem;
                right: 20/@rem;
                display: flex;
                align-items: center;
                img{
                    height: 34/@rem;
                    width: 34/@rem;
                    margin-right: 10/@rem;
                }
                span{
                    color: #868686;
                }
            }
            img{
                width: 160/@rem;
                height: 160/@rem;
            }
            .product-message{
                height: 100%;
                margin-left: 32/@rem;
                .product-name{
                    margin-top: 50/@rem;
                    font-size: 28/@rem;
                    width: 500/@rem;
                    text-align: start;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .product-price{
                    margin-top: 45/@rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    .price{
                        span:nth-of-type(1){
                            font-size: 28/@rem;
                            color: #fd4141;
                        }
                        span:nth-of-type(2){
                            font-size: 24/@rem;
                            color: #868686;
                            text-decoration: line-through;
                            margin-left: 10/@rem;
                        }
                    }
                    .buy-btn{
                        width: 144/@rem;
                        height: 56/@rem;
                        background-color: #fd4141;
                        border-radius: 4/@rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        span{
                            color: #ffffff;
                            font-size: 24/@rem;
                        }
                    }
                    .buy-btn:active{
                        background: #f22727;
                    }
                }
            }
        }
    }
}
</style>
